<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>维修订单</title>
    <link href="css/public/reset-html5.css" rel="stylesheet">
    <link href="css/public/mui.min.css" rel="stylesheet">
    <link href="css/wx-main.css?20161028_1" rel="stylesheet">
    <link rel="stylesheet" href="css/orderlist.css">
</head>
<body id="main">

<div class="mui-row mar-top mar-btm pad">
    <ul id="top">
        <li name="2">
            <p>待接单</p>
            <div v-text="order_status_info.order_info.wait">0</div>
        </li>
        <li style="margin-left: 0" name="3">
            <p>待维修</p>
            <div v-text="order_status_info.order_info.waiting">0</div>
        </li>
        <li style="margin-left: 0" name="0">
            <p>售后申请</p>
            <div v-text="order_status_info.order_info.after_sales">0</div>
        </li>
    </ul>
</div>

<div>
    <div class="primary-text pad status" style="font-size: 17px">
	    <span>订单列表</span>
        <select id="status">
            <option value="0">全部订单</option>
            <option value="2">待接单</option>
            <option value="3">待维修</option>
            <option value="4">待付款</option>
            <option value="6">已完成</option>
        </select>
    </div>

    <div style="clear: both"></div>

    <div class="mui-card" v-show="order_list.length==0">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">暂无订单数据</div>
        </div>
    </div>

    <div class="mui-card" v-for="list in order_list" v-on:click="go_order_info(list.order_id)">
        <div class="mui-card-header text-color3" style="font-size: 14px"><span v-text="'订单编号：'+list.order_num"></span> <span class="mui-pull-right" v-text="list.status | getStatus"></span> </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>下单时间：<span v-text="list.ctime | getLocalTime"></span></p>
                <p class="text-center primary-text" style="font-size: 16px" v-text="list.phone_name">

                </p>
                <p class="text-center text-color2" style="font-size: 12px" v-text="list.color+'，'+list.version">

                </p>

                <div class="border-1 pad8 text-center text-color2 mar-btm" v-for="li in list.data.fault_info">
                    <span v-text="li.name"></span><span class="primary-text" v-text="'('+li.price+'元)'"></span>
                </div>
            </div>
        </div>
        <div class="mui-card-footer">
            <div class="mui-text-right primary-text">
                总价：<span v-text="list.price"></span>元
            </div>
        </div>
    </div>


</div>
</body>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="js/phone.js"></script>
<script src="js/public.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
    var status;//状态
    $('#top').find('li').click(function(){
        var  index = $(this).attr('name');
        if(index!=0){
            status = index;
            $('#status').val(status);
            vue.get_order_list();
        }
    });

    function initStatus(){
        var cache_status = localStorage.master_order_status;
        if(cache_status){
            status = cache_status;
            $('#status').val(status);
        }
    }

    initStatus();

    Date.prototype.Format = function(format) {
	    var date = {
		    "M+": this.getMonth() + 1,
		    "d+": this.getDate(),
		    "h+": this.getHours(),
		    "m+": this.getMinutes(),
		    "s+": this.getSeconds(),
		    "q+": Math.floor((this.getMonth() + 3) / 3),
		    "S+": this.getMilliseconds()
	    };
	    if (/(y+)/i.test(format)) {
		    format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
	    }
	    for (var k in date) {
		    if (new RegExp("(" + k + ")").test(format)) {
			    format = format.replace(RegExp.$1, RegExp.$1.length == 1
				    ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
		    }
	    }
	    return format;
    };
    
    //将UTC格式转为正常的日期格式输出
    function getUTCTime(second) {
        var d = new Date();
        //转换毫秒
        d.setTime(second * 1000);
        return d.Format("yyyy-MM-dd hh:mm");
    }


    Vue.filter('getLocalTime', function (value) {
        return getUTCTime(value)
    });


    var vue = new Vue({
        el:"#main",
        data:{
            order_list:'',
            order_status_info:''
        },
        methods:{
            'get_order_list':function(){
                var that = this;
                var data = {};
                if(status){
                    data.status = status
                } else {
                	data.status = 0;
                }
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=getOrderList',data,function(res){
                    if(res.code==200){
                        that.order_list = res.data
                    }else if(res.code==201){
                        that.order_list = '';
                    }else{
                        alert(res.message);
                    }
					layer.close(index);
                },'json');
            },
            'get_top_info':function(){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=getAdminIndex',{},function(res){
                    if(res.code==200){
                        that.order_status_info = res.data;
                    }else if(res.code==0){
                        location.href = 'index.html';
                    }else{
                        alert(res.message);

                    }
					layer.close(index);
                },'json');
            },
            'go_order_info':function(id){
                localStorage.master_order_status = status;
                location.href = "repair_order_info.html?order_id="+id;
            }
        },
        ready:function(){
            this.get_top_info();
            this.get_order_list();
        }
    });



    $('#status').change(function(){
        status = $(this).val();
        vue.get_order_list();
    });

    Vue.filter('getStatus', function (value) {
        return getStatus(value)
    });

    function getStatus(value){
        var status = '';
        switch(parseInt(value))
        {
            case -1:
                status = '已取消';
                break;
            case 1:
                status = '已下单';
                break;
            case 2:
                status = '待接单';
                break;
            case 3:
                status = '待维修';
                break;
            case 4:
                status = '待付款';
                break;
            case 5:
                status = '待评价';
                break;
            case 6:
                status = '已完成';
                break;
        }
        return status;
    }
</script>
</html>